<template>
  <div class="blackList">
    <el-tabs v-model="activeName">
    <el-tab-pane label="黑名单设置" name="setting">
      <setting />
    </el-tab-pane>
    <el-tab-pane label="访客黑名单" name="visitor" :lazy="true">
      <visitor />
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script lang="ts">
/**
 * 黑名单
 */
import { Component, Vue } from 'vue-property-decorator';
import Setting from './component/setting.vue'
import Visitor from './component/visitor.vue'
@Component({
  name: 'BlackList',
  components: { Setting, Visitor }
})
export default class BlackList extends Vue {
  private activeName: string = 'setting'
}
</script>

<style lang="stylus" scoped>
.blackList
  padding-top: 10px
  border-radius 10px
  height calc(100% - 40px)
  overflow auto
  box-sizing border-box
  margin 0 2px 2px 0
  border 1px solid #ecf0f3
  box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
  >>> .el-tabs__content
        position: absolute;
        height: calc(100% - 110px);
        width: 100%;
  >>> .el-tab-pane
        height: 100%
        overflow: auto
        margin: 0px 6px
  >>> .el-tabs__header
        padding 0px 24px
        margin-bottom: 8px
  >>> .el-form-item__label
        padding 0px
  >>> .content
        height: calc(100% - 177px) !important
</style>
